<template>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号" width="80" />
        <el-table-column prop="teamNumber" label="业务单号" width="140" />
        <el-table-column prop="factory" label="工厂" width="100" />
        <el-table-column prop="workshop" label="车间" width="100" />
        <el-table-column prop="department" label="部门" width="100" />
        <el-table-column prop="productionLine" label="产线" width="120" />
        <el-table-column prop="teams" label="班组" width="100" />
        <el-table-column prop="shift" label="班次" width="100" />
        <el-table-column label="状态" width="100">
            <template #default="{ row }">
                {{ row.state? '已交接' : '待交接' }}
            </template>
        </el-table-column>
        <el-table-column prop="date" label="日期" width="180">
            <template #default="{ row }">
                {{ formatDate(row.date) }}
            </template>
        </el-table-column>
        <el-table-column prop="recorders" label="记录人" width="120" />
        <el-table-column prop="shiftleader" label="交班班长" width="120" />
        <el-table-column prop="successionMonitor" label="接班班长" width="120" />
        <el-table-column fixed="right" label="操作" min-width="200">
            <template #default="scope">
                <el-button link type="danger" :icon="Delete" size="small" @click="Del(scope.row.teamId)">删除</el-button>
                <el-button link type="warning" :icon="Edit" size="small" @click="Upd(scope.row.teamId)">修改</el-button>
                <el-button link type="success" :icon="Share" size="small" @click="Connect(scope.row)">交接班</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination v-model:current-page="form.pageIndex" v-model:page-size="form.pageSize"
        :page-sizes="[15, 20, 25, 30]" layout="total, sizes, prev, pager, next, jumper" :total="form.totalCount"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />

</template>


<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from 'axios'
import { useRouter, useRoute } from 'vue-router'
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
import {read,write} from '@/axios/axiosHelper'
import moment from 'moment'

const router = useRouter()
const route = useRoute()

// Add type definitions
interface TeamData {
  teamNumber: string;
  factory: string;
  workshop: string;
  department: string;
  productionLine: string;
  teams: string;
  shift: string;
  state: boolean;
  date: string;
  recorders: string;
  shiftleader: string;
  successionMonitor: string;
}

interface QueryForm {
  factory: string;
  workshop: string;
  department: string;
  productionLine: string;
  teams: string;
  shift: string;
  date: string;
  pageIndex: number;
  pageSize: number;
  totalCount: number;
  totalPage: number;
}

// 定义车间和部门的映射关系
const workshopDepartmentMap: { [key: string]: { label: string; value: string }[] } = {
    '酿造车间': [
        { label: '酿造部', value: '酿造部' }
    ],
    '糖化车间': [
        { label: '糖化部', value: '糖化部' }
    ],
    '过滤车间': [
        { label: '过滤部', value: '过滤部' }
    ]
};

// 定义车间和产线的映射关系
const workshopProductionLineMap: { [key: string]: { label: string; value: string }[] } = {
    '酿造车间': [
        { label: '酿造一线', value: '酿造一线' },
        { label: '酿造二线', value: '酿造二线' }
    ],
    '糖化车间': [
        { label: '糖化一线', value: '糖化一线' },
        { label: '糖化二线', value: '糖化二线' }
    ],
    '过滤车间': [
        { label: '过滤一线', value: '过滤一线' },
        { label: '过滤二线', value: '过滤二线' }
    ]
};

// 部门选项
const departmentOptions = ref<{ label: string; value: string }[]>([]);
// 产线选项
const productionLineOptions = ref<{ label: string; value: string }[]>([]);

const tableData = ref<TeamData[]>([]);
const loading = ref(false);

const form = reactive<QueryForm>({
    factory: '南京',
    workshop: '',
    department: '',
    productionLine: '',
    teams: '',
    shift: '',
    date: '',
    pageIndex: 1,
    pageSize: 15,
    totalCount: 0,
    totalPage: 0,
});

const handleSizeChange = (val: number) => {
    Show();
}
const handleCurrentChange = (val: number) => {
    Show();
}

onMounted(() => {
    Show();
})

//显示所有数据
const Show = () => {
    read.get("p2-read/api/Team/QueryTeam", {
        params: {
            pageIndex: form.pageIndex,
            pageSize: form.pageSize
        }
    })
       .then(res => {
            tableData.value = res.data.data;
            const groupMap = new Map();
            tableData.value.forEach((row, index) => {
                const key = `${row.productionLine}-${row.department}-${row.workshop}`;
                if (groupMap.has(key)) {
                    const firstIndex = groupMap.get(key);
                    tableData.value[index].state = true;
                } else {
                    groupMap.set(key, index);
                }
            });
            form.totalCount = res.data.totalCount;
            form.totalPage = res.data.totalPage;
        })
}

//逻辑删除数据
const Del = (teamId: any) => {
    ElMessageBox.confirm(
        '确认删除吗?',
        'Warning',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
       .then(() => {
            write.post("p2-write/api/Team/DelTeam", {
                teamId: teamId
            })
               .then(res => {
                    if (res.data.code == 200) {
                        ElMessage.success(res.data.msg);
                        Show();
                    }
                    else {
                        ElMessage.error(res.data.msg);
                        return;
                    }
                })
        })
}

//跳转到修改界面
const Upd = (teamId: any) => {
    router.push({
        path: '/UpdTeam',
        query: {
            teamId: teamId
        }
    })
}

//交接班
const Connect = (row: any) => {
    router.push({
        path: '/Connect',
        query: {
            teamId: row.teamId
        }
    })
}

const formatDate = (date: string | Date) => {
    return moment(date).format('YYYY-MM-DD HH:mm:ss');
}

</script>    